<template>
  <view class="page">
    <view class="search-bar">
      <view class="search-input">
        <input type="text" v-model="keywords" placeholder="请输入关键字" />
        <image class="icon-search" src="/static/images/icon_search.png" mode=""></image>
        <view class="search-button" @click="search">搜索</view>
      </view>
    </view>
    <view class="tabs">
      <view v-for="(item, index) in offerTypelist" :key="index" class="tab" :class="{active: index === swiperCurrent}"
        @click="change(index)">{{item.label}}</view>
    </view>
    <!-- <view class="search">
			<u-search v-model="keywords" @custom="search" @search="search"  height="80"></u-search>
			<view class="u-tabs-box">
				<u-tabs-swiper ref="tabs" activeColor="#2b85e4" name="label" :list="offerTypelist" :current="swiperCurrent" @change="change" :is-scroll="false" swiperWidth="750"></u-tabs-swiper>
			</view>
		</view> -->
    <scroll-view class="scroll-list" scroll-y="true" @scrolltolower="loadMore">
      <view class="card-list">
        <view class="card-item" v-for="(item, index) in list" :key="index" @click="toDetail(item.link)">
          <view class="card-item-hd">
            <image class="icon" src="/static/images/icon_notice.png" mode=""></image>
            {{item.pubDate}}
          </view>
          <view class="card-item-bd">
            <view class="card-title">{{item.title}}</view>
            <view class="card-content">
              <uni-text>{{getContent(item.description)}}</uni-text>
            </view>
            <!-- <view class="card-desc">{{item.pubDate}}</view> -->
          </view>
          <view class="card-item-ft">
            查看详情
            <view class="icon-arrow"></view>
          </view>
        </view>
      </view>

      <!-- <view class="uni-list" v-for="(item, index) in list" :key="index" style="margin-top: 5rpx;margin-bottom: 5rpx;">
        <uni-view class="uni-list-cell">
          <view class="uni-media-list" @click="toDetail(item.link)">
            <view style="margin:6px;">
              <i class="iconfont icon-tongzhi1"></i>
              <view style="font-size: 16px;">{{formatMonthAndDay(item.pubDate)}}</view>
              <u-line color="#D5D5D5"></u-line>
              <view style="color:darkgray;font-size: 15px;">{{formatYear(item.pubDate)}}</view>
            </view>
            <uni-view class="uni-media-list-body">
              <uni-view class="flex flex-direction uni-media-list-text-top  u-line-1"
                style="margin-bottom:2px;"><span>{{item.title}}</span></uni-view>
              <uni-view class="flex flex-direction uni-media-list-text-content u-line-2">
                <i class="iconfont icon-rizhi" style="margin-right:10px;"></i>
                <uni-text
                  v-if="item.description!=null && item.description!=''"><span>{{getContent(item.description)}}</span></uni-text>
                <uni-text v-else><span>无</span></uni-text>
              </uni-view>
            </uni-view>
            <uni-view class="uni-media-list-right">
              <u-icon name="arrow-right" class="u-icon-wrap u-cell__right-icon-wrap" style="color: lightgray;"></u-icon>
            </uni-view>
          </view>
        </uni-view>
      </view> -->
      <u-loadmore class="loadmore" :status="loadStatus"></u-loadmore>
    </scroll-view>
  </view>
</template>
<script>
  import $time from '@/common/time.js';
  export default {
    data() {
      return {
        keywords: '',
        query: {
          current: 1,
          size: 10
        },
        offerTypelist: [],
        swiperCurrent: 0,
        list: [],
        pages: 0,
        loadStatus: 'loadmore',
        categoryList: []
      };
    },
    onLoad() {
      this.loadOfferTypeList();
      // this.loadList();
    },
    computed: {

    },
    methods: {
      loadOfferTypeList() {
        this.$u.api.rssoffer.offerTypeList(this.query).then(res => {
          if (!res.data || res.data.length == 0) {
            return;
          }
          this.offerTypelist = res.data;
          this.loadList();
        });
      },
      navTo(url) {
        uni.navigateTo({
          url: url
        });
      },
      formatYear(createTime) {
        return $time.dateFormat(new Date(createTime.replace(/-/g, '/')), "{Y}");
      },
      formatMonthAndDay(createTime) {
        return $time.dateFormat(new Date(createTime.replace(/-/g, '/')), "{MM}-{DD}");
      },
      search(value) {
        this.list = [];
        this.query.current = 0;
        this.query.title = value;
        this.loadList();
      },

      loadList() {
        if (this.keywords != '') {
          this.query.searchContent = this.keywords;
        }
        this.query.rssType = this.offerTypelist[this.swiperCurrent].value;
        this.$u.api.rssoffer.offerList(this.query).then(res => {
          if (!res.data.records || res.data.records.length == 0) {
            this.loadStatus = "nomore";
            return;
          }
          this.list = this.list.concat(res.data.records);
          this.pages = res.pages;
          this.query.current = res.data.current;
          this.query.size = res.data.size;
          this.loadStatus = "loadmore";
        });
      },
      loadMore() {
        this.loadStatus = "loading";
        setTimeout(() => {
          this.query.current += 1;
          this.loadList();
        }, 100);
      },
      getContent(value) {
        let res = value.replace(/<.+?>/g, '').replace(/&nbsp;/ig, '').replace(/\s/ig, '');
        return res;
      },
      change(index) {
        this.list = [];
        this.query.current = 0;
        if (this.keywords != '') {
          this.query.searchContent = this.keywords;
        }
        this.swiperCurrent = index;
        this.loadList();
      },
      toDetail(url) {
        window.location = url;
      }
    }
  };
</script>
<style lang="scss">
  .page {
    position: relative;
    background: #F7F7F7;
  }

  .search-bar {
    display: flex;
    align-items: center;
    padding: 16rpx 32rpx;
    background: #fff;
  }

  .search-input {
    position: relative;
    width: 100%;
    height: 64rpx;
    border-radius: 32rpx;
    background: #F7F7F7;
    overflow: hidden;

    input {
      width: 100%;
      height: 64rpx;
      border: 0;
      padding: 0 144rpx 0 64rpx;
      outline: 0;
      line-height: 64rpx;
      font-size: 24rpx;
      font-weight: 500;
      color: #999;
      background: transparent;
    }

    .icon-search {
      position: absolute;
      top: 21rpx;
      left: 21rpx;
      width: 22rpx;
      height: 22rpx;
    }

    .search-button {
      position: absolute;
      top: 0;
      right: 0;
      width: 144rpx;
      border-radius: 32rpx;
      line-height: 64rpx;
      text-align: center;
      font-size: 24rpx;
      font-weight: 700;
      color: #fff;
      background: #3989FC;
    }
  }

  .tabs {
    position: relative;
    display: flex;
    height: 88rpx;
    background: #fff;

    &::before {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      left: 0;
      display: block;
      border-top: 1px solid #F7F7F7;
    }

    .tab {
      position: relative;
      width: 100%;
      line-height: 88rpx;
      text-align: center;
      font-size: 28rpx;
      font-weight: 500;
      color: #999;

      &::after {
        content: '';
        position: absolute;
        bottom: 4rpx;
        left: 50%;
        display: inline-block;
        width: 32rpx;
        height: 8rpx;
        border-radius: 4rpx;
        background: transparent;
        transform: translateX(-50%);
      }

      &.active {
        font-weight: 700;
        color: #333;

        &::after {
          background: #3989FC;
        }
      }
    }
  }

  .scroll-list {
    height: calc(100vh - var(--window-top) - var(--window-bottom) - 96rpx - 88rpx);

    .loadmore {
      padding: 32rpx;
    }
  }

  .card-list {
    display: flex;
    flex-direction: column;
    padding: 24rpx 24rpx 0;
  }

  .card-item {
    width: 100%;
    border-radius: 8rpx;
    margin-bottom: 24rpx;
    background: #fff;
  }

  .card-item-hd {
    display: flex;
    align-items: center;
    padding: 32rpx;
    font-size: 24rpx;
    font-weight: 500;
    color: #999;

    .icon {
      width: 34rpx;
      height: 34rpx;
      margin-right: 16rpx;
    }
  }

  .card-item-bd {
    padding: 0 32rpx 32rpx;
    line-height: 42rpx;
    font-size: 24rpx;
    font-weight: 500;
    color: #999;
  }

  .card-title {
    margin-bottom: 32rpx;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 32rpx;
    font-weight: 700;
    color: #000;
    overflow: hidden;
  }

  .card-content {
    height: 83rpx;
    overflow: hidden;

    text {
      display: -webkit-box;
      word-break: break-all;
      overflow: hidden;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
  }

  .card-desc {
    margin-top: 8rpx;
    color: #ccc;
  }

  .card-item-ft {
    position: relative;
    padding: 32rpx;
    font-size: 28rpx;
    font-weight: 700;
    color: #3989FC;

    &::before {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      left: 32rpx;
      display: block;
      height: 1px;
      background: #eee;
    }

    &::after {
      content: '';
      position: absolute;
      top: 40rpx;
      right: 32rpx;
      display: inline-block;
      width: 16rpx;
      height: 16rpx;
      border-top: 2rpx solid #999;
      border-right: 2rpx solid #999;
      transform: rotate(45deg);
    }
  }
</style>